<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中的按钮和图片</title>
    <style>
        .container {
            text-align: center; /* 使内容水平居中 */
            margin-top: 20px; /* 按钮和图片与顶部的距离 */
        }
        .button {
            display: inline-block;
            margin: 0 10px; /* 按钮之间的间隔 */
            padding: 10px 20px; /* 按钮内边距 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标悬停时显示手形图标 */
        }
        img {
            max-width: 100%; /* 图片最大宽度为100% */
            height: auto; /* 高度自适应 */
        }
    </style>
</head>
<body>

<div class="container">
    <!-- 第一行居中的三个按钮 -->
    <button class="button" onclick="buttonClicked(1)">LED灯点亮</button>
    <button class="button" onclick="buttonClicked(2)">LED灯熄灭</button>
    <button class="button" onclick="buttonClicked(3)">拍照</button>
</div>

<div class="container">
    <!-- 第二行居中的图片 -->
    <img id="image-display" src="{{ url_for('static', filename='demo.jpg') }}" alt="未拍摄到图片">
</div>

<script>
    function buttonClicked(buttonNumber) {
        fetch('/button-click', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({button_number: buttonNumber})
        })
        .then(response => {
            if (response.status === 204) {
                // 如果是204状态码，不需要等待响应体，直接更新图片
                if (buttonNumber === 3) {
                    // 为图片src添加时间戳以防止浏览器缓存
                    var timestamp = new Date().getTime();
                    document.querySelector('.container img').src = '{{ url_for("get_external_image") }}?' + timestamp;
                }
            }
        })
        .catch(error => console.error('Error:', error));
    }
</script>

</body>
</html>
